<template>
  <div
      class="top_img"
      :class="top_img_h"
      @mouseover="trFm(1)"
      @mouseout="trFm(0)"
      :style="`background-image:url('${img}')`"
    ></div>
</template>

<script>
export default {
  props: {
    img: String
  },
  data() {
    return {
      top_img_h: ''
    }
  },
  methods: {
    trFm(i) {
      if (i) {
        this.top_img_h = "top_img_h";
      } else {
        this.top_img_h = "top_img_o";
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.top_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  text-align: center;
}
.top_img_h {
  transform: scale(1.1);
  transition: transform 0.5s ease-in;
}
.top_img_o {
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

</style>